<template>
	<view>
		<view class="title">{{infoObj.caseDetail.title}}</view>
		<view class="plate">
			<view class="p-type">{{infoObj.caseDetail.caseTypeName}}</view>
			<view class="p-date">{{infoObj.caseDetail.addTimeNow}}</view>
		</view>
		<rich-text :nodes="infoObj.caseDetail.content" class="content"></rich-text>
		<view class="label aclear" v-if="infoObj.caseDetail.newsTypeName">
			<navigator :url="infoObj.caseDetail.newsTypeUrl" class="l-a">{{infoObj.caseDetail.newsTypeName}}</navigator>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				infoObj: {
					caseDetail: {
						addTime: '',
						caseType: '',
						caseTypeAliases: '',
						caseTypeName: '',
						cityAliases: '',
						cityCode: '',
						cityName: '',
						content: '',
						id: '',
						newsTypeAliases: '',
						newsTypeName: '',
						title: ''
					},
					upperCase: null,
					nextCase: null
				}
			}
		},
		onLoad(option) {
			this.id = option.id || ''
		},
		onShow() {
			this.getInfoFn()
		},
		methods: {
			// 获取案例详情
			async getInfoFn() {
				let getInfo = await this.u.http({
					url: this.u.queryCaseById,
					data: {
						id: this.id
					}
				})
				if (getInfo.code == 200 && getInfo.data) {
					getInfo.data.caseDetail.addTimeNow = this.u.formatTime(getInfo.data.caseDetail.addTime, 'Y-m-d')
					getInfo.data.caseDetail.content = getInfo.data.caseDetail.content.replace(/<img/gi, '<img style="width: 100%;"')
					getInfo.data.caseDetail.newsTypeUrl = `/pages/xwzx?type=${getInfo.data.caseDetail.newsTypeAliases}`
					this.infoObj = getInfo.data
					uni.setNavigationBarTitle({
						title: getInfo.data.caseDetail.title
					})
					// 设置TDK
					if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
						swan.setPageInfo({
							title: `${getInfo.data.caseDetail.title}-纺扬网站建设`,
							description: '',
							keywords: '网站制作,网站开发,网站设计,纺扬网站建设',
							articleTitle: getInfo.data.caseDetail.title,
							image: getInfo.data.caseDetail.images
						})
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");
	
	.title {
		padding: 38rpx 24rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.plate {
		padding: 0 24rpx;
		margin-top: 29rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.p-type, .p-date {
			color: #999;
			font-size: 24rpx;
		}
	}
	
	.content {
		padding: 40rpx 24rpx;
		display: block;
	}
	
	.label {
		padding: 0 24rpx 40rpx 24rpx;
		
		.l-a {
			float: left;
			padding: 0 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: @color-orange;
			color: #fff;
			border-radius: 4rpx;
			font-size: 22rpx;
		}
	}
</style>
